import { InfoCircleOutlined, SearchOutlined, UserOutlined} from '@ant-design/icons';
import { Avatar as A, Dropdown, Typography, Space, Input} from 'antd';
import type { MenuProps, GetProps } from 'antd';

type SearchProps = GetProps<typeof Input.Search>;
const {Text} = Typography
const { Search } = Input;

export const Question = ()=>{
    const handleClick = ()=>{
        console.log('问题按钮被点击了')
    }
    return (
        <InfoCircleOutlined  onClick={handleClick} />
    )
}

const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
export const SelectLang = ()=>{
    return (
        <Search placeholder="请输入搜索关键字" onSearch={onSearch} enterButton />  
    )
}

//头像部分
export const Avatar: React.FC = ()=>{
    const url = 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg'
    const items: MenuProps['items'] = [
        {key: 'center',label: '个人中心'},
        {key: 'logout',label: '退出登陆'},
      ];
      const onClick: MenuProps['onClick'] = ({ key }) => {
        console.log('key',key)
      };
    return (
        <Dropdown  menu={{ items, onClick }}>
            <Space align="center">
                <A size="small" src={url} />
                <Text>管理员</Text>
            </Space>
        </Dropdown>
    )
}